<template>
  <div class="newBillContainer">
    <div class="invoiceContent">
      <div class="detail">
        <i class="iconfont" style="color:#409eff">&#xe61f;</i><span>开票详情</span>
      </div>
      <div class="invoiceTable">
        <el-table
          border
          :data="invoices"
          style="width: 100%">
          <el-table-column
            prop="receiptDate"
            label="收票日期"
            :show-overflow-tooltip="true"
            :formatter="dateFormat">
          </el-table-column>
          <el-table-column
            prop="kaipiaoDate"
            label="开票日期"
            :show-overflow-tooltip="true"
            :formatter="dateFormat">
          </el-table-column>
          <el-table-column
            prop="kaipiaoCompany"
            label="开票公司"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="companyName"
            label="收票公司"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称">
          </el-table-column>
          <el-table-column
            width="80"
            prop="invoiceMoney"
            label="发票金额">
          </el-table-column>
          <el-table-column
            prop="noTax"
            label="不含税金额"
            width="95">
          </el-table-column>
          <el-table-column
            prop="hanTax"
            label="税额"
            width="80">
          </el-table-column>
          <el-table-column
            prop="invoiceNo"
            label="发票号"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="payDate"
            label="付款日期"
            :show-overflow-tooltip="true"
            :formatter="dateFormat">
          </el-table-column>
          <el-table-column
            width="80"
            prop="invoiceType"
            label="类型">
            <template slot-scope="scope">
              <span>{{scope.row.invoiceType | invoiceType}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="录入人"
            width="80">
          </el-table-column>
          <el-table-column
            width="140"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="LookInvoice(scope.row,scope.row.id)">查看</el-button>
              <el-button type="text" @click="delInvoice(scope.row.id)">删除</el-button>
              <el-button type="text" @click="upload(scope.row.id)">上传</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
      <div class="returnBtn">
        <el-button size="medium" @click="goBack">返回</el-button>
      </div>
    
    <el-dialog
      title="采购打款审批"
      :visible.sync="dialogVisible">
      <v-form :formProps="confirmForm" ref="form"
              v-on:handleReset="handleReset"
              v-on:coverFormData="coverFormData"></v-form>
    </el-dialog>
   
  
  </div>
</template>
<script>
  import VForm from "components/common/VForm"
  import {localStorage} from 'js/localStorage'

  
  const remitTypeValue = {
    '1': '全款',
    '2': '预付款',
    '3': '尾款',
    '4': '质保金',
    '5': '其他'
  };

  export default {
    components: {
      VForm
    },
    data() {
      return {
        showUpload: false,
        dialogVisible: false,
        confirmForm: {
          resetBtn: {
            text: '取消',
          },
          col: 1,
          labelWidth: '90px',
          formItemArray: [{
            label: '审批结果',
            placeholder: "请选择",
            rules: [{required: true, message: '请选择审批结果', trigger: 'change'}],
            prop: 'approveResult',
            itemType: 'select',
            options: [
              {value: '1', label: '通过'},
              {value: '2', label: '驳回'}
            ],
            value: ''
          }, {
            label: '审批意见',
            prop: 'memo',
            itemType: 'textarea',
            value: ''
          },]
        },
        purBillsId: {},
        chRemitList: [],
        invoices: [],
        userId: '',
        row: '',
        id: ''
      }
    },
    created() {
      this.userId = localStorage.get('userID');
      this.purBillsId = this.$route.query.purBillsId;
      this.init();
    },
    filters: {
      invoiceType(val) {
        return val == 1 ? "普通发票" : "专用发票";
      },
      approveState(val) {
        switch (val) {
          case"1" :
            return "待初审";
            break;
          case"2" :
            return "待终审";
            break;
          case"3" :
            return "初审驳回";
            break;
          case"4" :
            return "终审成功";
            break;
          case"5" :
            return "终审驳回";
            break;
        }
      }
    },
    methods: {
      approvalConfirm(row) {
        this.row = row;
        this.dialogVisible = true;
      },
      closeUpload() {
        this.showUpload = false
      },
      upload(id) {
        this.id = id;
        this.showUpload = true
      },
      handleReset(formName) {
        this.$refs.form.resetForm(formName);
        this.dialogVisible = false;
      },
      coverFormData(data) {
        data['type'] = this.row.record.type;
        data['id'] = this.row.record.id;
        data['remitId'] = this.row.id;
        data['purBillsId'] = this.row.purBillsId;
        data['approveId'] = this.row.approveId;
        data['remitStatus'] = this.row.approveState;
        let success = data => {
          if (data.code === "OK") {
            this.dialogVisible = false;
            this.tips.MessageModal('success', '审批操作成功！');
            this.lookBill();
          } else {
            this.$message.error(data.msg)
          }
        };
        this.api.remitConfirm(data, success)
      },
      init() {
        this.lookBill();
      },
      //时间格式化
      dateFormat(row, column, cellValue, index) {
        if (cellValue == null) {
          return null
        } else {
          return this.formatSystemDate(cellValue);
        }
      },
      goBack() {
        this.$router.go(-1)
      },
      //查看打款信息
      LookChRemit(id) {
        this.$router.push({
          path: '/bill-order-pay-view',
          query: {
            purBillsId: this.purBillsId,
            id: id,
          }
        })
      },
      //查看开票信息
      LookInvoice(row,id) {
        this.$router.push({
          path: '/bill-order-invoice-detail',
          query: {
            invoiceData:row,
            id:id
          }
        })
      },
      lookBill() {
        let params = {
          purBillsId: this.purBillsId,
          userId: this.userId,
        }
        let success = data => {
          if (data.code === "OK") {
            this.chRemitList = data.data.chRemitList;
            this.chRemitList.forEach(item => {
              item.remitType = remitTypeValue[item.remitType];
            });
            this.invoices = data.data.invoices;
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpInvoiceGet(params, success)
      },
      //删除发票
      delInvoice(id) {
        this.$confirm('是否删除该消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          //删除供应商列表信息
          let params = {
            id: id
          }
          let success = data => {
            if (data.code === 'OK') {
              this.$message.success("删除成功");
              this.lookBill();
            } else {
              this.$message.error(data.msg);
            }
          }
          this.api.purInvoiceDelete(params, success)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //打款删除
      delChRemit(id) {
        this.$confirm('是否删除该消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          //删除供应商列表信息
          let params = {
            id: id
          }
          let success = data => {
            if (data.code === 'OK') {
              this.$message.success("删除成功");
              this.lookBill();
            } else {
              this.$message.error(data.msg)
            }
          }
          this.api.purInvoiceremitDelete(params, success)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .newBillContainer {
    .invoiceContent {
      background: #fff;
      margin-bottom: 20px;

      .detail {
        line-height: 45px;

        i {
          margin: 8px 8px;
        }
      }
      .invoiceTable {
        width: 100%;
        min-height: 100px;
      }
    }
      .table{
        background: #fff;
        .detail{
          line-height:45px;
          i{
            margin:8px 8px;
          }
        }
      }

      
      .returnBtn {
        width: 100%;
        text-align: center;
        padding: 30px 0;
      }

  }
</style>

